// import React from "react";
import msgContext from "./msgContext";
// export default function LevelThree() {
//   return (
//     <div>
//       <h3>LevelThree</h3>
//       <div
//         style={{
//           backgroundColor: "skyblue",
//         }}
//       >
//         <p>Show Message Container:</p>
//         <msgContext.Consumer>
//           {(msg) => {
//             return <p style={{ background: "green" }}>{msg}</p>;
//           }}
//         </msgContext.Consumer>
//       </div>
//     </div>
//   );
// }

import React, { Component } from "react";

export default class LevelThree extends Component {
  // 在这里需要额外指定 contextType 属性
  static contextType = msgContext;
  render() {
    return (
      <div>
        <h3>LevelThree</h3>
        <div
          style={{
            backgroundColor: "skyblue",
          }}
        >
          <p>Show Message Container:</p>
          {/* 在获取时，我们通过 this.context 来获取 */}
          <p style={{ background: "green" }}>{this.context}</p>
        </div>
      </div>
    );
  }
}
